<template>
  <div>
    <el-form ref="form" :model="form" label-width="180px">
      <el-form-item :label="'日期选择（单选）'">
        <filter-value-input
          v-model="form.date1"
          type="date"
          @change="(val) => (value1 = val)"
        />
      </el-form-item>
      <el-form-item :label="'日期选择（多选）'">
        <filter-value-input
          v-model="form.date2"
          type="date"
          :multiple="true"
          @change="(val) => (value2 = val)"
        />
      </el-form-item>
      <el-form-item :label="'下拉选（单选）'">
        <filter-value-input
          v-model="form.select1"
          type="select"
          :multiple="false"
          @change="(val) => (value3 = val)"
        />
      </el-form-item>
      <el-form-item :label="'下拉选（多选）'">
        <filter-value-input
          v-model="form.select2"
          type="select"
          :multiple="true"
          @change="(val) => (value4 = val)"
        />
      </el-form-item>

      <el-form-item :label="'VirtualSelect单选'">
        <VirtualSelect
          ref="VSelect"
          v-model="form.singlevirtualSelectValue"
          :multiple="false"
        />
        <el-button @click="$refs.VSelect.focus()"></el-button>
      </el-form-item>

      <el-form-item :label="'VirtualSelect单选'">
        <VirtualSelect
          ref="VSelect"
          v-model="form.multiVirtualSelectValue"
          :multiple="true"
        />
        <el-button @click="$refs.VSelect.focus()"></el-button>
      </el-form-item>
      <el-form-item :label="'TreeTransfer'">
        <TreeTransfer :treeData="treeData" v-model="treeValue" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import CombinationInput from "./CombinationInput.vue";
// import ConbinationValueInput from "./ConbinationValueInput.vue";
import FilterValueInput from "./FilterValueInput.vue";
import VirtualSelect from "./VirtualSelect.vue";
import MyTreeTransfer from "./MyTreeTransfer.vue";
export default {
  name: "HelloWorld",
  components: {
    // ConbinationValueInput,
    VirtualSelect,
    FilterValueInput,
    TreeTransfer: MyTreeTransfer,
  },
  props: {},
  provide() {
    return {};
  },
  data() {
    return {
      form: {
        date1: [],
        date2: [],
        select1: [],
        select2: [],

        value1: null,
        value2: [],
        value3: null,
        value4: [],
        singlevirtualSelectValue: null,
        multiVirtualSelectValue: [],
      },
      items: [
        [
          { value: 1, label: "asdfadsf" },
          { value: 2, label: "asdfadsf" },
        ],
      ],
      treeValue: ["1-2-1"],
      treeData: [
        {
          id: "1",
          pid: 0,
          label: "一级 1",
          children: [
            {
              id: "1-1",
              pid: "1",
              label: "二级 1-1",
              disabled: true,
              children: [],
            },
            {
              id: "1-2",
              pid: "1",
              label: "二级 1-2",
              children: [
                {
                  id: "1-2-1",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-1",
                },
                {
                  id: "1-2-2",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-2",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    onClick() {
      // this.$refs['dateRef'].focus();
      this.$refs["dateRef"].toggleMenu();
      // this.$refs['virtual-select'].focus();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<style>
.my-custom-popover {
  padding: 0px !important;
  /* padding-right: 0px !important; */
}
</style>
